<template>
  <div class="table-data">
    <el-form
      :rules="rules"
      ref="ruleForm"
      :model="form"
      label-width="120px"
      size="small"
      class="form-box"
    >
      <p class="title">基础信息设置</p>
       <el-form-item label="商家类型" prop="shop_cate_id">
        <el-select v-model="form.shop_cate_id" filterable placeholder="请选择">
          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商家名称" prop="name">
        <el-input type="text" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="添加图片" prop="logo">
        <uploadImg @bindSendImg="propImg" :imgUrl="form.imgUrl"></uploadImg>
      </el-form-item>
      <el-form-item label="所在城市">
        <Region @bindSendAddress="propAddress" :address="address"></Region>
      </el-form-item>
      <el-form-item label="详细地址" prop="detail">
        <el-input type="text" v-model="form.detail"></el-input>
      </el-form-item>
      <el-form-item label="地图选点" prop="application">
        <Map @bindSendMap="propMap" :point="form.point"></Map>
      </el-form-item>
      <el-form-item label="营业时间" prop="dateTime">
        <el-input v-model="startTime" placeholder="起始时间"></el-input> - <el-input v-model="endTime" placeholder="结束时间"></el-input>
      </el-form-item>
      <el-form-item label="联系人" prop="user">
        <el-input type="text" v-model="form.user"></el-input>
      </el-form-item>
      <el-form-item label="店内电话" prop="phone">
        <el-input maxlength="12" v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="人均价格" prop="price">
        <el-input type="number" v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item label="商家优惠">
        <el-input type="textarea" v-model="form.promotion"></el-input>
      </el-form-item>
      <el-form-item label="展示标签（用多个逗号隔开）">
        <el-input type="text" v-model="form.tag_show"></el-input>
      </el-form-item>
      <p class="title">结算信息设置</p>
      <el-form-item label="联系人电话" prop="tel">
        <el-input maxlength="11" v-model="form.tel"></el-input>
      </el-form-item>
      <el-form-item label="商家结算费率" prop="rate ">
        <el-input type="text" v-model="form.config.rate"></el-input>
      </el-form-item>
      <el-form-item label="银行卡开户行">
        <el-input type="text" v-model="form.config.bank_name"></el-input>
      </el-form-item>
      <el-form-item label="银行卡卡号">
        <el-input type="text" v-model="form.config.bank_number"></el-input>
      </el-form-item>
      <el-form-item label="持卡人姓名">
        <el-input type="text" v-model="form.config.cardholder_name"></el-input>
      </el-form-item>
      <el-form-item label="收银台配置">
          <el-select v-model="form.pay_config.is_open" clearable placeholder="收银台配置">
            <el-option  label="开启" :value="1"></el-option>
            <el-option  label="关闭" :value="0"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item v-if="form.pay_config.is_open" label="收款方式">
        <el-radio-group v-model="form.pay_config.pay.wechat">
          <el-radio :label="1">微信支付</el-radio>
        </el-radio-group>
      </el-form-item>  

      <el-form-item label="结算打款方式">
          <el-radio-group v-model="form.config.settle_type">
          <el-radio :label="1">线下打款</el-radio>
          <!-- <el-radio :label="2">线上打款</el-radio> -->
        </el-radio-group>
      </el-form-item>
     
      <p class="title">登录信息设置</p>
      <el-form-item label="账号" prop="username">
        <el-input type="text" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="text" v-model="form.password"></el-input>
      </el-form-item>
     
    </el-form>
    <div class="dialog-footer">
      <el-button @click="cancel" size="small">取消</el-button>
      <el-button @click="submitFormAdd('ruleForm')" type="primary" size="small">确定</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide } from "vue-property-decorator";
import {AMapManager, lazyAMapApiLoaderInstance} from 'vue-amap'
import uploadImg from "@/components/uploadImg/index.vue";
import Map from "@/components/map/index.vue";
import Region from "@/components/region/index.vue";
import businessApi from "@/api/business";
import isMobileNumber from "@/api/formValidation.js";
@Component({
  components: {Map,uploadImg,Region}
})
export default class businessAddDialog extends Vue {
  // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  check:boolean = true//防重复提交
  startTime:any = '05:00'//营业时间
  endTime:any= '22:00'//营业时间
  @Provide() value:any=[]
  @Provide() address: any=[];
  @Provide() typeList: any = []; // 商家类型列表
  @Provide() form:any={
    id:'',
    name:'',
    logo:'',
    user:'',
    province:'',
    promotion:'',
    tag_show:'',
    city:'',
    district:'',
    detail:'',
    phone:'',
    username:'',
    password:'',
    shop_cate_id:'',
    point:'',
    price:'',
    start_time:'',
    end_time:'',
    pay_config : {
        is_open : 0,
        pay:{
          wechat:1,
          union:0
        }
    },
    config:{
        phone:'',
        rate:'',
        bank_name:'',
        bank_number:'',
        cardholder_name:'',
        settle_type:1,
    },
  };
  @Provide() rules: any = {
    // logo: [{ required: true, message: "请上传商家图", trigger: "change" }],
    price:[{ required: true, message: "请输入人均价格", trigger: "blur" },{
        //pattern: /^[1-9]\d*(\.\d+)?$/,  //大于1
        pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,  //正则
        message: '请输入大于0的数'
      }],
    name: [{ required: true, message: "请输入商家名称", trigger: "blur" }],
    user: [{ required: true, message: "请输入联系人", trigger: "blur" }],
    detail: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
    phone: [{ required: true, message: "请输入店内电话", trigger: "blur" },{
        pattern: /^[0-9-]{8,12}$/,  //正则
        message: '请输入正确电话号码'
      }],
    tel:[{required: true, message: "请输入联系人电话", trigger: "blur"}
    // ,{ validator: isMobileNumber, trigger: "blur" }
    ],
    rate: [{ required: true, message: "请输商家结算费率", trigger: "blur" }],
    username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    shop_cate_id:[{ required: true, message: "请选择商家类型", trigger: "blur" }]
  };
  // 上传图片子组件传递过来的图片路径
  propImg(imgPath: any){
    this.form.logo = imgPath;
  }
  //省事级联组件传递过来的值
  propAddress(address:any){
    this.form.province = address[0];
    this.form.city = address[1];
    this.form.district = address[2];
  }
  //地图组件传递过来的值
  propMap(point:any){
    this.form.point = point;
  }
  // 取消
  cancel(){
    this.$router.push({
      path:'/businessList'
    })
  }
  // 提交
  submitFormAdd(formName: any) {
    (this.$refs[formName] as any).validate((valid: boolean) => {
      if (valid) {
        this.form.config.phone=this.form.tel
        this.form.start_time=this.startTime;
        this.form.end_time=this.endTime;
        delete this.form.tel
        if(this.endTime!==''&&this.endTime!=='') {
          if(this.check) {
            let _this = this
            _this.check = false
            businessApi.saveBusiness(_this.form)
            .then((res: any) => {
              if(res.data.status){
                _this.$message({
                  message: '操作成功',
                  type: "success"
                });
                _this.$router.push({
                  path:'/businessList'
                })
                _this.$emit("loadData")
                setTimeout(() => {
                  _this.check = true
                }, 1500);
              }else{
                _this.$message({
                  message: res.data.msg,
                  type: "error"
                });
                _this.check = true
              }
            });
          }
        }else {
          this.$message({
            message: '请输入营业时间',
            type: "error"
          });
        }
        
      }
    });
  }
  
  created() {
     businessApi.businessTypeList(1,99999)
      .then((res: any) => {
        this.typeList = res.data.data.list;
      });
  }
  mounted(){
  }
}
</script>

<style lang="scss" scoped>

.dialog-footer{
  padding-left: 50px
}
.form-box {
  .el-input,
  .el-select {
    width: 200px !important;
  }
  .title{
    line-height: 60px;
    font-weight: bold;
    font-size: 16px;
  }
}
.el-textarea {
  width: 200px !important;
}
</style>
